<template>
  <div class="page-console">
    <n-grid x-gap="12" y-gap="12">
      <n-gi :span="12">
        <BasicChart title="访问量" :option="option1" />
      </n-gi>
      <n-gi :span="12">
        <BasicChart title="区域排行" :option="option2" />
      </n-gi>
      <n-gi :span="12">
        <BasicChart title="销售额" :option="option3" />
      </n-gi>
      <n-gi :span="12">
        <BasicChart title="访问来源" :option="option4" />
      </n-gi>
    </n-grid>
  </div>
</template>

<script>
import BasicChart from "@/components/basic-chart/index.vue";
import { getEchartsData } from "@/api/dashboard";

export default {
  name: "dashboard_console",

  components: {
    BasicChart,
  },

  data() {
    return {
      // 访问量
      option1: {
        xAxis: {
          type: "category",
          data: [],
        },
        tooltip: {},
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "bar",
          },
        ],
      },

      // 区域排行
      option2: {
        xAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category", // 类目轴
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          data: [],
        },
        series: [
          {
            name: "2011",
            type: "bar",
            colorBy: "data",
            barWidth: 20,
            itemStyle: {
              borderRadius: 10,
            },
            data: [],
          },
        ],
      },

      // 销售额
      option3: {
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        title: {
          subtext: "单位元",
          left: 100,
        },
        legend: {
          right: 0,
        },
        series: [
          {
            data: [],
            name: "当月销售额",
            type: "line",
            areaStyle: {},
          },
          {
            data: [],
            type: "line",
            name: "月均销售额",
            areaStyle: {},
          },
        ],
      },

      option4: {
        title: {
          text: "访问来源",
          subtext: "全站来源统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },

  methods: {
    async fetchData() {
      const {
        data: { visits, regionRanking, sales, source },
      } = await getEchartsData();

      // 访问量
      this.option1.xAxis.data = visits.map((item) => item.label);
      this.option1.series[0].data = visits.map((item) => item.value);

      // 区域排行
      this.option2.yAxis.data = regionRanking.map((item) => item.label);
      this.option2.series[0].data = regionRanking.map((item) => item.value);

      // 销售额
      this.option3.xAxis.data = sales.map((item) => item.label);
      this.option3.series[0].data = sales.map((item) => item.current);
      this.option3.series[1].data = sales.map((item) => item.average);

      // 访问来源
      this.option4.series[0].data = source.map((item) => {
        return {
          value: item.value,
          name: item.label,
        };
      });
    },
  },

  mounted() {
    this.fetchData();
  },
};
</script>

<style lang="scss" scoped>
.basic-chart {
  width: 100%;
  height: 430px;
}
</style>
